<template>
    <div>

        {{ 0 | myfilter }}

        <button @click="counter++">点我</button>

        {{ counter }}

        {{ reverse_msg }}

        <ul>
            <li v-for='(item,index) in tlist' :class="{on:index%2==0,off:index%2!=0}">

              {{ index }}  {{ item.text }}

            </li>
        </ul>

        {{ msg }}

        <div v-html="msg"></div>

        <h1 v-show="ok">显示</h1>


        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else>
            C
        </div>

    </div>
</template>

<script>

    export default{

        //数据定义
        data(){

            return{

                msg:'你好，这是一个变量',
                ok:false,
                type:'C',
                tlist:[{text:'汽车'},{text:'面包'},{text:'鲜花'}],
                counter:0

            }

        },
        //过滤器
        filters:{

            myfilter:function(value){

                if(value==1){

                    return '已支付';
                }else{
                    return '未支付'
                }


            }

        },
        //监听属性
        watch:{

            counter:function(nval,oval){

                console.log('计数器的变化:'+oval+'变成了'+nval);


            }

        },
        //计算属性
        computed:{

            reverse_msg:function(){

                return this.msg.split('').reverse().join('')
            }

        },
        //初始化方法钩子方法
        mounted:function(){



        },
        //常用方法，自定义方法
        methods:{




        }

    }

</script>

<style>
.on{background: blueviolet;}
.off{background: chartreuse;}
</style>